<template>
	<view class="page">
		<!-- 导航区域 -->
		<u-navbar title="产品销量" :autoBack="true" leftText="返回" bgColor="rgba(255,255,255,0)"></u-navbar>

		<div class="main">
			<view class="order-data-main">

				<div style="height: 10rpx;"></div>
				<div id="order-data-total-view">
					<div>
						<p class="order-data-total-title">联合创始人</p>
						<p id="total-money">5</p>
					</div>

					<div>
						<p class="order-data-total-title" style="margin-right: 40rpx;margin-left: 0;">代理</p>
						<p id="total-user">0</p>
					</div>

					<div>
						<p class="order-data-total-title" style="margin-right: 40rpx;margin-left: 0;">会员</p>
						<p id="total-user">0</p>
					</div>

					<div>
						<p class="order-data-total-title" style="margin-right: 40rpx;margin-left: 0;">粉丝</p>
						<p id="total-user">0</p>
					</div>
				</div>

				<div class="white-card-bg">
					<div>
						<p class="title-text" style="margin-left: 40rpx;">能量门已售(件)</p>
						<p class="content-text" style="margin-left: 40rpx;">0</p>
					</div>
					<div>
						<p class="title-text" style="margin-left: 40rpx;">命运之轮已售(件)</p>
						<p class="content-text" style="margin-left: 40rpx;">0</p>
					</div>
					<div>
						<p class="title-text" style="margin-left: 40rpx;margin-right: 30rpx;">高定系列已售(件)</p>
						<p class="content-text" style="margin-left: 40rpx;margin-right: 30rpx;">0</p>
					</div>
				</div>



				<div class="rankings">
					<div style="margin-left: 30rpx;display: flex;align-items: center;">
						<div style="width: 8rpx;height: 32rpx;background-color: #CFAE7D; border-radius: 4rpx;"></div>
						<span style="font-size: 32rpx;color: #333;margin-left: 20rpx;">排行榜</span>
					</div>

					<ul style="padding: 0;">
						<li>
							<div
								style="margin-left: 30rpx;display: flex;align-items: center;padding-top: 30rpx;justify-content: space-between;">
								<div style="display: flex;align-items: center;justify-content: center;">
									<span class="rankings-level">1</span>
									<div style="position: relative;margin-left: 36rpx;">
										<img id="level-flag" src="../../static/icon/ic_first_place.png" alt="" />
										<img id="user-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
									</div>
								</div>
								<span id="contribution-value">贡献值：22229</span>
							</div>
						</li>
						<li>
							<div
								style="margin-left: 30rpx;display: flex;align-items: center;padding-top: 30rpx;justify-content: space-between;">
								<div style="display: flex;align-items: center;justify-content: center;">
									<span class="rankings-level">2</span>
									<div style="position: relative;margin-left: 36rpx;">
										<img id="level-flag" src="../../static/icon/ic_first_place.png" alt="" />
										<img id="user-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
									</div>
								</div>
								<span id="contribution-value">贡献值：22229</span>
							</div>
						</li>

					</ul>
				</div>


			</view>



		</div>

	</view>
</template>

<script>
</script>

<style>
	.main {
		width: 750rpx;
		height: 1370rpx;
		background-color: #FAFAFA;
		position: fixed;
		padding-top: 90rpx;

	}

	.order-data-main {
		background-color: #FAFAFA;
		width: 750rpx;
	}

	li {
		list-style-type: none;
	}

	#order-data-total-view {
		display: flex;
		background-color: #5C1D63;
		padding-top: 40rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
		align-items: center;
		justify-content: space-between;
	}

	.order-data-total-title {
		font-size: 24rpx;
		color: #fff;
		opacity: 0.5;
		margin-left: 40rpx;
	}

	#total-money {
		color: white;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: bold;
		font-size: 32rpx;
		margin-top: 8rpx;
		margin-left: 40rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
	}

	#total-user {
		color: white;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: bold;
		font-size: 32rpx;
		margin-top: 8rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
	}

	.white-card-bg {
		display: flex;
		background-color: white;
		padding-top: 40rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
		align-items: center;
		justify-content: space-between;
	}

	.title-text {

		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		opacity: 0.5;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.content-text {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: bold;
		font-size: 32rpx;
		color: #FF2928;
		margin-top: 8rpx;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
	}

	.data-update-time-line {
		width: 52rpx;
		height: 2rpx;
		border: 1rpx solid #979797;
		opacity: 0.5;
	}

	#data-update-time {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 24rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
		color: #000000;
		opacity: 0.2;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.rankings {
		background-color: white;
		padding-top: 40rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 20rpx;

	}

	.rankings-level {
		font-family: Roboto, Roboto;
		font-weight: 400;
		font-size: 36rpx;
		color: #FEC601;
		line-height: 36rpx;
		text-align: justify;
		font-style: normal;
	}

	#level-flag {
		width: 72rpx;
		height: 60rpx;
		position: absolute;
		top: -12rpx;
		left: -6rpx;
		border-radius: 1000px;

	}

	#user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 1000px;
	}

	#contribution-value {

		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #A1A1A1;
		line-height: 36rpx;
		margin-right: 30rpx;
		text-align: right;
		font-style: normal;
	}
</style>